import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Image,
  TouchableOpacity,
  TouchableHighlight,
  TouchableNativeFeedback

} from 'react-native';
import {
  View,
  Text
} from 'native-base';
import Swiper from 'react-native-swiper';



class SlideBox extends Component {
  constructor(props) {
    super(props);
    this.state = {};

  }
  renderItem() {

  }

  _onPressButton() {
    alert('hello')
  }

  render() {
    const {
      items,
      height,
      width,
    } = this.props;
    return (
      <View style={{height:height,width:width} }>
        <Swiper 
          style={styles.wrapper} 
          showsButtons={false} 
          height={height}
          width={width}
          autoplay={true}
          dot={<View style={{backgroundColor:'rgba(255,255,255,.3)', width: 8, height: 8,borderRadius: 4, marginLeft: 5, marginRight: 5,}} />}
          activeDot={<View style={{backgroundColor: '#fff', width: 8, height: 8, borderRadius: 4, marginLeft: 5, marginRight: 5}} />}
          paginationStyle={{
            bottom: 10, left: null, right: 10,
          }}
        >
    {
      items.map((item, key) => {
        return (
            <View key={key} style={styles.slide}>
              <TouchableOpacity onPress={this._onPressButton}>
                <Image style={{flex: 1,height:height,width:width}} resizeMode='stretch' source={{uri:item.image}} />
              </TouchableOpacity>
            </View>
        )
      })
    }
        </Swiper>
      </View>
    );
  }
}

//样式表
const styles = StyleSheet.create({
  slide: {

    justifyContent: 'center',
    backgroundColor: 'transparent'
  }
});

export default SlideBox;